/* *** CSS Commun entre toutes les MARQUES *** */


/* Mise en forme */
.ReadOnly {
	background-color: #e0e0e0 !important;
}

/* Font des textes */
.MontserraBold {
	font-family: Montserrat- Bold !important;
}
.MontserraSemiBold {
	font-family: Montserrat-Semi Bold !important;
}
.MontserraMedium {
	font-family: Montserrat-Medium !important;
}
.MontserraRegular {
	font-family: Montserrat-Regular !important;
}
.FontItalic {
	font-style: italic
}

/* Mise en forme des champs "etat" (hormis la couleur) */
.LibEtat {
	color: #4D4D4D;
	font-family: Montserrat-Regular !important;
	font-size: 10pt; 
	font-style: normal;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
	border:1px solid #9D9D9C;
}


/* Mise en forme du check box pour la validation de la confidentialité GED */
.LibConfidential {
	color: #4D4D4D !important;
	font-family: Montserrat-Regular !important;
	font-size: 9pt;
	font-style: italic !important;
}


/* Mise en forme des libellés */
.Libelle {
	font-family: Montserrat-Regular, sans-serif !important;
    white-space: nowrap;
}

/* Mise en forme des libellés en MEDIUM (surcharge de libellés en REGULAR) */
[id*="LIBF_MED_"].Libelle {
	font-family: Montserrat-Medium !important;
    white-space: nowrap;
}


/* Etat devis EN COURS */
.EtatDevis_W {
	color: #FF9700;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #FF9700;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}
/* Etat devis FIN DE SAISIE */
.EtatDevis_Q {
	color: #57A9DF;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #57A9DF;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}
/* Etat devis COMMANDE */
.EtatDevis_C {
	color: #30C957;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #30C957;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}
/* Etat devis REFUSE */
.EtatDevis_R {
	color: #EB2A41;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #EB2A41;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}


/* Etat commande PRE-SAISIE, EN SAISIE, A VALIDEE */
.EtatCommande_PRE,
.EtatCommande_ENC,
.EtatCommande_AVA {
	color: #FF9700;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #FF9700;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}
/* Etat commande VALIDEE */
.EtatCommande_VAL {
	color: #57A9DF;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #57A9DF;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}
/* Etat commande EN COURS DE FAB, STOCK USINE */
.EtatCommande_ECB,
.EtatCommande_STU {
	color: #30C957;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #30C957;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}
/* Etat commande EXPEDIABLE, LIVRAISON et LIVREE */
.EtatCommande_EXP,
.EtatCommande_LIV {
	color: #5D2478;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #5D2478;
	border-radius: 5px;
	text-decoration: none;
	padding: 0 10px 0 10px !important;
}
/* Etat commande FACTUREE, SOLDEE */
.EtatCommande_FAC,
.EtatCommande_SOL {
	color: #2D2E83;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #2D2E83;
	border-radius: 5px;
	text-decoration: none;
    white-space: nowrap;
	padding: 0 10px 0 10px !important;
}

/* Etat commande ANNULE */
.EtatCommande_ANN {
	color: #EB2A41;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px;
	text-align: center;
	vertical-align: middle;
	border:1px solid #EB2A41;
	border-radius: 5px;
	text-decoration: none;
    white-space: nowrap;
	padding: 0 10px 0 10px !important;
}


/* Mise en forme d'élément graphique */
.ElemCoinArrondi {
	border-radius: 10px;
}

/* Changer les images des boutons de documents */
[id*="BTN_"].BTN_Partage {
	background-image: 	url(/ESPACEPRO_WEB/ext/EspacePro/EP_PictoPartage.png), 
						url(/ESPACEPROTEST_WEB/ext/EspacePro/EP_PictoPartage.png), 
						url(/CRM_WEB/ext/EspacePro/EP_PictoPartage.png);
	background-position: center;
	background-repeat: no-repeat;
}

[id*="BTN_"].BTN_Apercu {
	background-image: 	url(/ESPACEPRO_WEB/ext/EspacePro/EP_PictoApercu.png), 
						url(/ESPACEPROTEST_WEB/ext/EspacePro/EP_PictoApercu.png), 
						url(/CRM_WEB/ext/EspacePro/EP_PictoApercu.png);
	background-position: center;
	background-repeat: no-repeat;
}

[id*="BTN_"].BTN_Telechargement {
	background-image: 	url(/ESPACEPRO_WEB/ext/EspacePro/EP_PictoTelechargementFichier.png),  
						url(/ESPACEPROTEST_WEB/ext/EspacePro/EP_PictoTelechargementFichier.png), 
						url(/CRM_WEB/ext/EspacePro/EP_PictoTelechargementFichier.png);
	background-position: center;
	background-repeat: no-repeat;
}

/* Mise en forme des champs de saisie lorsqu'ils ont une erreur */
[id*="SAI_"].ErreurSaisie,
/*[id*="LIB_"].ErreurSaisie,*/
.ErreurSaisie {
	border: 2px dashed !important;
	border-color: rgba(255, 0, 0, 0.5) !important;
	font-family: Montserrat-Regular, sans-serif !important;
}

/* On ajout le "*" en rouge après le libellé du texte */
[id*="LIB_"].TxtDemande::after {
	content: "*"; /* Caractère à ajouter */
	color: red;  /* Couleur du caractère */
	margin-left: 2px; /* Espacement entre le texte et le caractère */
	font-size: 11pt;
	font-family: Montserrat-Regular, sans-serif;
}


#SAI_RECHERCHE {
	background-color: #F2F2F2 !important;
	color: #4D4D4D;
	font-family: Montserrat-Regular, sans-serif;
	font-size: 12px; 
	text-align: left;
	border: 1px solid #F2F2F2;
	border-radius: 4px;
}


/* Mise en forme des boutons GENERIQUE */
[id*="BTN_MENU_"].NavBouton,
.NavBouton {
	background-color: inherit;
	color: #4D4D4D;
	font-family: Montserrat-Medium !important;
	font-size: 18px;
	font-style: normal;
	font-weight: bold;
	text-decoration: none;
	padding: 10px 20px;
	cursor:pointer;
	border-radius: 10px;
	border:1px solid #9D9D9C;
	display: inline-flex !important; 	/* pour le respect du placement de l'image */
	justify-content: center;
	align-items: center;
	flex-flow: column;
}
[id*="BTN_MENU_"].NavBouton:hover,
.NavBouton:hover {
	background-color: #FFAB08;
	color: #F2F2F2;
	border:1px solid #FFAB08;
	border-radius: 10px;
	text-decoration: none;
}
[id*="BTN_MENU_"].NavBouton:active,
.NavBouton:active {
	position:relative;
	top:1px;
}


/* Mise en place des dimensions pour les boutons de l'écran d'accueil */
/* Mobile */
@media only screen and (max-width: 979px) {
	[id*="BTN_MENU_"].NavBouton {
		width: 70vw !important;
		height: 170px !important;
	}
}
/* PC */
@media only screen and (min-width: 980px) {
	[id*="BTN_MENU_"].NavBouton {
		width: 22vw !important;
		height: 170px !important;
	}
}


/* Mise en forme des boutons LANGUE dans le menu MON COMPTE  */
[id*="BTN_MENUMONCOMPTE"].MenuBtn,
.MenuBtn {
	background-color: #F2F2F2;
	color: #4D4D4D;
	font-family: Montserrat-Medium !important;
	font-size: 14px; 
	font-style: normal;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	cursor:pointer;
	border:1px solid #9D9D9C;
}
[id*="BTN_MENUMONCOMPTE"].MenuBtn:hover,[id*="BTN_MENUMONCOMPTE"].MenuBtn:focus,
.MenuBtn:hover {
	background-color: #FFAB08;
	color: #f2f2f2 ;
	border:1px solid #FFAB08;
	text-decoration: none;
}
[id*="BTN_MENUMONCOMPTE"].MenuBtn:focus {
	border:1px solid #9D9D9C;
}
[id*="BTN_MENUMONCOMPTE"].MenuBtn:active,
.MenuBtn:active {
	position:relative;
	top:1px;
}


/* Gestion pour les images dans les boutons */
.ImgNavBouton {
	margin-bottom:10px;
	background-repeat: no-repeat;
	background-size: contain;
}
/* Gestion pour les images dans les boutons spécifiquement pour le "NewProduit" */
.ImgNewProduitBouton {
	height: 70px !important;
	margin-top:5px;
	margin-bottom:10px;
	background-size: contain !important;
	background-repeat: no-repeat;
	background-position:center;
	background-size: contain;
}


/* Mise en forme des boutons DESACTIVE */
[id*="BTN_"]:disabled {
    white-space: nowrap;
	pointer-events: none;
	opacity: 0.4;
}


/* Mise en forme des boutons X (fermeture fenetre) */
[id*="BTN_"].BtnPageFerme {
	background-color: inherit;
	color: #4D4D4D;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px; 
	text-align: center;
	text-decoration: none;
	cursor:pointer;
    white-space: nowrap;
	box-shadow:none;
}
[id*="BTN_"].BtnPageFerme:hover,
[id*="BTN_"].BtnPageFerme:focus {
	background-color: #FFAB08;
	color: #4D4D4D ;
	border:2px solid #FFAB08;
	border-radius: 4px;
	text-decoration: none;
    white-space: nowrap;
	box-shadow:none;
}
[id*="BTN_"].BtnPageFerme:active {
	position:relative;
	top:1px;
    background-color: #FFAB08;
	color: #4D4D4D ;
	border:1px solid #FFAB08;
	border-radius: 4px;
	text-decoration: none;
    white-space: nowrap;
	box-shadow:none;
}


/* Mise en forme du fil d'ariane */
/* Lien precedant */
.SMP_FILARIANE_0 {
	color: #4D4D4D;
	font-family: Montserrat-Regular !important;
	font-size: 12px; 
	font-style: normal;
	text-align: center;
	text-decoration: none;
	cursor:pointer;
}
/* Lien actuel */
.SMP_FILARIANE_2 {
	color: #4D4D4D;
	font-family: Montserrat-Regular !important;
	font-size: 14px; 
	font-style: normal;
	font-weight: bold;
	text-align: center;
	text-decoration: none;
	cursor:pointer;
}


/* Lien HTML */
#LIEN_MENTIONSLEGALES,
#LIEN_NOSCGV,
#LIEN_FAQ,
#LIEN_TUTOS,
[id*="TEL_HTML"],
[id*="MAIL_HTML"],
[id*="LIEN_HTML"] {
	color: #4D4D4D;	/* FUT = Gris Foncé // MAR = Gris Foncé */
	font-family: Montserrat-Regular !important;
	text-decoration: none;
    white-space: nowrap;
}
#LIEN_MENTIONSLEGALES:hover,
#LIEN_NOSCGV:hover,
#LIEN_FAQ:hover,
#LIEN_TUTOS:hover,
[id*="TEL_HTML"]:hover,
[id*="MAIL_HTML"]:hover,
[id*="LIEN_HTML"]:hover {
	color: #4D4D4D;	/* FUT = Gris Foncé // MAR = Gris Foncé */
	font-family: Montserrat-Medium !important;
	text-decoration: underline;
    white-space: nowrap;
}


/* Mise en forme des bloques de texte HTML */
[id*="LIB_HTML"] {
	color: #4D4D4D !important; /* FUT = Gris Foncé // MAR = Gris Foncé */
	font-family: Montserrat-Regular !important;
	font-size: 10pt; 
}


/* Mise en forme pour la largeur des boutons pour les onglets dans "Mes indicateurs" */
[id*="ONG_MESINDICATEURS_"] {
	min-width: 150px !important; 
}


/* Mise en forme de l'image d'accueil */
#IMG_ACCUEIL {
	width: 100%;
	max-height: 500px;
	margin-left: auto;
	margin-right: auto;
}


/* Cas particulier */
.txtNoWrap {
	white-space: nowrap;
}


/* Caché l'image du bouton déconnexion sur le bureau */
#BTN_NAV_MEDECONNECTER_BUREAU {
	background-image: none !important;
}


/* Mise en forme des boutons de EP et ICONE */
#BTN_LANCEMENTRECHERCHE {
	background-color: inherit;
	color: #4D4D4D;
	font-family: Montserrat-Semi Bold !important;
	font-size: 14px; 
	text-align: center;
	text-decoration: none;
	cursor:pointer;
    white-space: nowrap;
	box-shadow:none;
}
#BTN_LANCEMENTRECHERCHE:hover,
#BTN_LANCEMENTRECHERCHE:focus {
	background-color: inherit;
	color: #4D4D4D ;
	font-family: Montserrat-Semi Bold !important;
	border-radius: 4px;
	text-decoration: none;
    white-space: nowrap;
	box-shadow:none;
}
#BTN_LANCEMENTRECHERCHE:active {
    background-color: #FFAB08;
	color: #4D4D4D ;
	font-family: Montserrat-Semi Bold !important;
	border-radius: 4px;
	text-decoration: none;
    white-space: nowrap;
	box-shadow:none;
}


/* Mise en forme des options pour les popup */
[id*="BTN_EP_"].BtnImgTexteAlign {
    display: flex !important; 	/* Centre verticalement */
    align-items: center;  		/* Centre verticalement */
    justify-content: center; 	/* Centre horizontalement si besoin */
    gap: 5px; 					/* Ajoute un espacement entre l'image et le texte */
    padding: 5px 10px; 			/* Ajuste si besoin */
	height: 37px !important; 	/* Assure une hauteur cohérente */
}
[id*="BTN_EP_"].BtnImgTexteAlign:hover {
	border:none !important;
}

/* Bloc d'information sur la page d'accueil (uniquement les infos communes) */
[id*="CELL_"].BorderTopGrisFonce {
	border-top: 1px solid #4D4D4D;		/* Gris Fonce */
}


/* ***** Mise en forme page MES LIGNES ***** */

/* Standard écran */
@media only screen and (min-height: 821px) {
	/* Mise en forme de la zone répétée pour les lignes des DEVIS */
	.Cell_ZR_LignesDevis {
		height: calc(100vh - 580px) !important;
		overflow-y: auto;
	}
	.Cell_ZR_LignesDevis_SansPrix {
		height: calc(100vh - 485px) !important;
		overflow-y: auto;
	}
	
	/* Mise en forme de la zone répétée pour les lignes des COMMANDES */
	.Cell_ZR_LignesCommandes {
		height: calc(100vh - 530px) !important;
		overflow-y: auto;
	}
	.Cell_ZR_LignesCommandes_SansPrix {
		height: calc(100vh - 430px) !important;
		overflow-y: auto;
	}
}
/* Petit écran en hauteur mais large */
@media only screen and (max-height: 820px) and (min-width: 1025px) {
/* Mise en forme de la zone répétée pour les lignes des DEVIS */
	.Cell_ZR_LignesDevis {
		height: calc(100vh - 525px) !important;
		overflow-y: auto;
	}
	.Cell_ZR_LignesDevis_SansPrix {
		height: calc(100vh - 420px) !important;
		overflow-y: auto;
	}
	
/* Mise en forme de la zone répétée pour les lignes des COMMANDES */
	.Cell_ZR_LignesCommandes {
		height: calc(100vh - 530px) !important;
		overflow-y: auto;
	}
	.Cell_ZR_LignesCommandes_SansPrix {
		height: calc(100vh - 430px) !important;
		overflow-y: auto;
	}
	
/* On masque le grand bouton ajouter ligne dans "Mes lignes devis" */
	#BTN_ADD_AJOUTLIGNEBAS.AjoutLigneBas {
		display: none !important;
	}
}
/* Petit écran */
@media only screen and (max-height: 820px) and (max-width: 1024px) {
/* Mise en forme de la zone répétée pour les lignes des DEVIS */
	.Cell_ZR_LignesDevis {
		height: calc(100vh - 555px) !important;
		overflow-y: auto;
	}
	.Cell_ZR_LignesDevis_SansPrix {
		height: calc(100vh - 440px) !important;
		overflow-y: auto;
	}
	
/* Mise en forme de la zone répétée pour les lignes des COMMANDES */
	.Cell_ZR_LignesCommandes {
		height: calc(100vh - 535px) !important;
		overflow-y: auto;
	}
	.Cell_ZR_LignesCommandes_SansPrix {
		height: calc(100vh - 430px) !important;
		overflow-y: auto;
	}
	
/* On masque le grand bouton ajouter ligne dans "Mes lignes devis" */
	#BTN_ADD_AJOUTLIGNEBAS.AjoutLigneBas {
		display: none !important;
	}
}


/* Petit écran */
@media only screen and (max-width: 1135px) {
/* On masque le bouton Enregistrer et Fermer */
	#BTN_EP_ENREGISTRER {
		display: none !important;
	}
	
/* Mise en forme de la zone répétée pour les lignes des DEVIS */
	.Cell_ZR_LignesDevis, .Cell_ZR_LignesDevis_SansPrix {
		width: 99vw !important;
		overflow-y: auto;
	}
	.Cell_ZR_LignesCommandes, .Cell_ZR_LignesCommandes_SansPrix {
		width: 98vw !important;
		overflow-y: auto;
	}
}

/* On masque la scroll bar bas */
.Cell_ZR_LignesDevis, .Cell_ZR_LignesDevis_SansPrix,
.Cell_ZR_LignesCommandes, .Cell_ZR_LignesCommandes_SansPrix {
	overflow-x: hidden;
}


/* Mise en forme du tableau RECAP DES DROITS */
.Cell_TableauDroit {
	width: 400px !important;
	height: calc(100vh - 530px) !important;
	overflow-y: auto;
}


/* Mise en forme du bloc aide pour le changement de MDP */
#HTM_AIDEMAJMDP {
	vertical-align: top;
	text-align: left;
}


/* Mise en forme des tableaux pour le TUTOS */
.video-title {
	margin-top: 10px;
	font-size: 16px;
	font-family: Montserrat-Semi Bold !important;
}
.table-VideoTuto {
	width: 100%;
	border-collapse: collapse;
}
.td-VideoTuto {
	padding: 5vh 10px 5vh 10px;
	text-align: center;
}
.td-VideoTuto:first-child {
    margin-bottom: 20px; /* Ajustez cette valeur pour plus ou moins d'espace */
}
.iframe-VideoTuto {
	width: 20vw;
	height: 20vh;
}


/* On affiche le nom de la BDD  */
[id*="LIB_BDD"] {
	color: #FF0000 !important;
}


/* On masque le fabriqué francais lorsque les écrans sont trop petit (largeur) */
@media only screen and (max-width: 1185px) {
	[id*="CELL_"].FabFrancais {
		display: none;
	}
}



/* Info bulle personnalisé */
/*
.tooltip-detailPrix {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
}

.tooltip-detailPrix .tooltiptext-detailPrix {
  visibility: hidden;
  width: 200px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  */
  /* Position the tooltip */
  /*
  position: absolute;
  z-index: 1;
  top: -5px;
  right: 105%;
}

.tooltip-detailPrix:hover .tooltiptext-detailPrix {
  visibility: visible;
}


.tooltip-DetailPrix-Left {
    position: relative; *//* Pour permettre le positionnement de la bulle */
   /* display: inline-block;
}
*/
.tooltip-DetailPrix::after {
    content: attr(title);
    position: absolute;
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 1000; /* S'assure que la bulle est au-dessus */
}

.tooltip-DetailPrix:hover::after {
    visibility: visible;
    opacity: 1;
    bottom: 100%; /* Position par défaut : au-dessus */
    left: 0; /* Par défaut : alignée à gauche */
}


/* */
[id*="POPUP_"].popupOptionMesDevis {
    position: absolute;
    left: 0;
    top: 0;
    transform: translate(var(--posX, 0px), var(--posY, 0px));
}


/* Mise en forme des tableaux #TODO: à continuer de chercher plutard */
/*[id*="TABLE_"] th {
   background-color:black;
   border-bottom:5px solid white;
   background-color:#E7267A;
}*/

/*Donne la couleur au ligne pair*/
/*[id*="TABLE_"] tr:nth-child(odd) {
   background-color:#FFAB08; 
}*/
/*Donne la couleur au ligne impaire*/
/*[id*="TABLE_"] tr:nth-child(even) {
   background-color:#0C1C47; 
}*/